<template>
	<view class="vipCenter">
		<swiper :current="current" @change="swiperChange" :style="{ height: `${windowHeight}px` }" :autoplay="false">
			<swiper-item v-for="(item, i) in vip_info.level_rules" :key="i">
				<view class="container" :class="{ container2: i === 0 || vip_info.level === '会员用户' }">
					<view class="vip-card">
						<image class="vipimg" src="@/static/images/vipcard.png" mode=""></image>
						<text class="vipType">{{ item.title }}</text>
						<text class="btext" v-if="vip_info.level === '普通用户'">{{ item.content }}</text>
						<text class="btext" v-else>您已是平台会员，享受专属会员价格</text>
					</view>

					<view class="card">
						<view class="viptitle">
							<image src="@/static/images/lcb.png" mode="aspectFit"></image>
							<text>会员说明</text>
							<image src="@/static/images/rcb.png" mode="aspectFit"></image>
						</view>
						<view class="content">
							<u-parse :content="info.content"></u-parse>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="footer-warp" v-if="true">
			<footer-btn
				v-if="vip_info.level_id != levelId && current > 0"
				:isChecked="checked"
				@change="change"
				@submit="submit"
				:text="`前往购买`"
				:footerStyle="{ position: 'fixed' }"
				:cush="false"
				:btnStyle="{
					color: '#000',

					background: 'linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%)'
				}"
			></footer-btn>
		</view>
	</view>
</template>

<script>
import { get_userInfo } from '@/common/common_fun.js';
export default {
	computed: {
		payPrice() {
			return (this.vip_info.level_rules[this.current] && this.vip_info.level_rules[this.current].price) || '';
		},
		levelId() {
			if (this.current > 0) {
				return this.vip_info.level_rules[this.current].id;
			}
			return null;
		}
	},
	data() {
		return {
			current: 1, //当前swiperindex
			vip_info: { level: '', level_rules: [{}, { id: '' }] },
			info: {},
			windowHeight: 0,
			checked: false
		};
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
		this.get_info('98');
	},
	onShow() {
		get_userInfo((data) => {
			this.vip_info = data;
		});
	},
	methods: {
		submit() {
			this.toTab(`home/home`);
			return;
			// if (!this.checked) {
			// 	this.msg('请阅读并同意会员隐私协议');
			// 	return;
			// }
			// console.log(this.vip_info.level_rules[this.current].id, '等级id');
			// this.$http
			// 	.getJson('money_buyLevel', {
			// 		level_id: this.vip_info.level_rules[this.current].id
			// 	})
			// 	.then((res_pay) => {
			// 		if (res_pay.code != 1) {
			// 			this.msg(res_pay.message);
			// 			return false;
			// 		}
			// 		this.$http.wx_pay(res_pay.data).then((result) => {
			// 			if (result.errMsg == 'requestPayment:fail cancel' || result.errMsg == 'requestPayment:fail') {
			// 				//用户取消支付
			// 				this.msg('取消支付');
			// 				return false;
			// 			} else {
			// 				this.msg('支付成功', () => {
			// 					get_userInfo((data) => {
			// 						this.vip_info = data;
			// 					});
			// 				});
			// 			}
			// 		});
			// 	});
		},
		change() {
			this.checked = !this.checked;
		},
		swiperChange(e) {
			this.current = e.detail.current;
		},
		get_info(id) {
			this.$http.getJson('index_newsDetail', { id }).then((res) => {
				this.info = res.data.info;
			});
		}
	}
};
</script>

<style lang="less" scoped>
.vipCenter {
	position: relative;
	z-index: 1;
	.footer-warp {
		// .bob();
		// height: 164rpx;
	}
	.container {
		padding: 32rpx;
		overflow: auto;
		height: calc(100vh - var(--window-top) - 164rpx);
	}
	.container2 {
		height: calc(100vh - var(--window-top));
	}
	.card {
		padding: 36rpx 24rpx;
		margin-top: 24rpx;
		min-height: 732rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.content {
			padding: 30rpx 0;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
		}
		.viptitle {
			.flex-center();

			image {
				width: 52rpx;
				height: 32rpx;
			}
			text {
				margin: 0 24rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #462e1b;
			}
		}
	}
	.vip-card {
		position: relative;
		z-index: 1;
		width: 686rpx;
		height: 344rpx;
		margin: auto;
		.vipimg {
			.fix-c();
			z-index: -1;
			width: 686rpx;
			height: 344rpx;
		}
		.vipType {
			position: absolute;
			top: 40rpx;
			left: 120rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #4a301d;
			background: #fce3c3;
		}
		.btext {
			position: absolute;
			left: 48rpx;
			bottom: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			padding-right: 48rpx;
		}
	}
	&::after {
		content: '';
		position: absolute;
		z-index: -1;
		top: 0rpx;
		left: 0;
		width: 750rpx;
		height: 260rpx;
		background: linear-gradient(135deg, #1c1212 0%, #1c1212 100%);
		border-radius: 0 0 50% 50%;
	}
}
</style>